<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-16 22:42:59
-->
<style>
    .top-panel>.layui-card-body {
        height: 130px;
    }

    .date-input {
        width: 200px;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <!-- 用于创建子页面 -->
    <div class="page-create"></div>

    <!-- page-main-create -->
    <!-- 用于显示 隐藏 -->
    <div class="layuimini-main page-main-create">


        <div class="title-row layuimini-title ">
            <div class="title-left">
                <span class="font-weight layui-font-20">计件工单报表</span>
                <form class="layui-form inline-block" action="" lay-filter="search-form">
                    <div class="flex justify-between" style="width: 300px;">
                        <div class="pl-5">
                            <input type="text" name="datePeriodStart" autocomplete="off" id="date_period"
                                class="layui-input " placeholder="请选择" />
                        </div>
                    </div>

                </form>
            </div>
            <div class="title-right">
                <span class="title-right-text">
                   
                    <button class="layui-btn layui-btn-primary layui-btn-sm" lay-on="download">
                        导出
                    </button>
                  
                </span>
            </div>
        </div>
        <div class="m-df">
            <form class="layui-form" action="" lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="search-box-wrapper">
                        <div class="search-box-body">
                            <div class="layui-inline">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" placeholder="请输入" name="nickname" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">类型</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="businessNames" lay-search>
                                        <option value="1">计时工单</option>
                                        <option value="2">报事加分</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="search-box-btns">
                            <button type="submit" class="layui-btn layui-btn-sm" lay-submit
                                lay-filter="data-search-btn">查询</button>
                            <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="section">


            <div class="px-5 pb-5 font-weight">
                <span class="mr-5">人数统计： 0 人</span>
                <span class="mr-5">积分总计： 0 人</span>
            </div>

            <div class=" table-stripe">
                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            </div>
        </div>



        <script type="text/html" id="currentTableBar">
            <a class="layui-font-blue mr-3" lay-event="edit">编辑</a>
            <a class="layui-font-red  mr-3" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script>
    layui.use(['form', 'table', 'tabs', 'miniPage', 'miniDate', 'element', 'echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            element = layui.element,
            miniDate = layui.miniDate,
            echarts = layui.echarts,
            miniPage = layui.miniPage;




        /******************** 渲染组件 start ********************/
        form.render('select'); //刷新select选择框渲染
        // 起始日期
        laydate.render({
            elem: '#date_period',
            type: 'month'
        });
       util.on('lay-on', {
            'download': function () {
                console.log('导出==')

            }
        })


        /******************** 渲染组件 end ********************/


        /******************** table start ********************/
        getTableData()
        function getTableData() {
            $.getJSON("api/userList.json", function (json) {
                console.log('json==', json)
                if (json.code === 0) {
                    renderTable(json.data.list);
                } else {
                    console.error("数据加载失败:", json.msg);
                }
            });
        }

        const startDate = `2025-07-01`;
        const endDate = `2025-07-08`;
        // 生成动态列配置
        function generateDynamicCols() {
            var cols = [
                // 序号	姓名	实际出勤
                { type: 'numbers', width: 80, fixed: 'left', title: '序号' },
                { field: 'nickname', width: 100, title: '姓名', fixed: 'left' },
                { field: 'projectId', width: 80, fixed: 'left', title: '实际出勤' },
                {
                    field: 'departmentName', width: 120, fixed: 'left', title: `
                <div style="position: relative;  font-size: 12px;line-height: 20px;"><div style="margin-left: 30px;">积分归属日</div><div style="text-align: left;">类型</div><div style="position: absolute; width: 1px; height: 95px; top: -25px; left: 50px; background-color: rgba(0, 0, 0, 0.06); display: block; transform: rotate(-75deg);"></div></div>
                ` },
            ];
            //获取月份对应的开始和结束日期
            // let monthCols = miniDate.getMonthRange(2025, 7)
            //根据开始日期结束日期获取日期列表
            // let dateWeekList = miniDate.getDateWithWeekArray(monthCols.start, monthCols.end)
            let dateWeekList = miniDate.getDateWithWeekArray(startDate, endDate)
            console.log('dateWeekList==', dateWeekList)

            // 添加月份列
            dateWeekList.forEach(function (item) {

                //动态日期头标题
                let _title = `<span class="lauyi-font-black">${item.date}</span>`
                if (item.isToday) {
                    _title += `<span class="is-today">今</span>`
                }
                cols.push({
                    field: item.date,
                    title: _title,
                    width: 142,
                    align: 'center',
                    templet: function (d) {
                        //格式化内容
                        let schedule = null
                        if (d.scheduleDataList[item.fullDate]) {
                            schedule = d.scheduleDataList[item.fullDate][0]
                        }
                        if (schedule) {
                            return `
                            <div class="columns_time" 
                            data-onDutyTime="${schedule.onDutyTime}" 
                            data-offDutyTime="${schedule.offDutyTime}"
                            data-shiftName="${schedule.shiftName}"
                            >
                                <div class="time-pd">${schedule.onDutyTime}-${schedule.offDutyTime}</div>
                                <div class="shift_name">${schedule.shiftName}</div>
                                </div>`;
                        } else {
                            return `-`
                        }
                    }
                });
            });

            return [cols];
        }


        /** 获取列表详情*/
        $('body').on('click', '.columns_time', function () {
            var noticeTime = $(this)


            var onDutyTime = $(this).attr('data-onDutyTime'),
                offDutyTime = $(this).attr('data-offDutyTime'),
                shiftName = $(this).attr('data-shiftName');


            //动态设置宽
            let xWidth = shiftName.length * 13 + 10
            if (xWidth < 240) {
                xWidth = 240
            }
            //自行定义【data-属性】然后取值显示
            layer.tips(`<div class="layui-font-13 layui-font-black">
<p class="mt-1"><span class="layui-font-gray">班次名称:</span>${shiftName}</p>
<p class="mt-1"><span class="layui-font-gray">排班时间:</span>${onDutyTime}-${offDutyTime}(8.00小时)</p>
<p class="mt-1"><span class="layui-font-gray">休息时间:</span>-(0.00小时)</p></div>`, this, {
                tips: [1, '#ffffff'],
                area: [xWidth + 'px', 'auto']
            });
        });
        function renderTable(data) {
            table.render({
                elem: '#currentTableId',
                data: data,
                defaultToolbar: [],
                cols: generateDynamicCols(),
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                page: true,
                skin: 'line',
                size: 'lg'
            });
        }

        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });
        /**
         * tool 事件监听
         */
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                //编辑传值
                layui.sessionData('SHIFT_PARAMS', {
                    key: 'dataDto',
                    value: JSON.stringify(data)
                });
                layui.sessionData('SHIFT_PARAMS', {
                    key: 'pageType',
                    value: 'edit'
                });
                var content = miniPage.getHrefContent('page/workforce/rm/components/shiftLib/add.html');
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '编辑班次',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['600px', 'auto'],
                    content: content,
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确认删除吗', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });
        /******************** table end ********************/
    });



</script>